<template>
    <div class="Home">
        <h2>$emit与$on方法组件传值</h2>
        <h1>This is an Home page</h1>
        <input type="text" name="" placeholder="修改我的数据" v-model='b'>
        <input type="button" value='把home数据传给About' @click='send' />
        <span>接收about组件的数据为：{{b}}</span>
    </div>
</template>
<script>
import bus from '../bus.js'
export default {
    name: 'About',
    components: {},
    data() {
        return {
            b: 'home'
        }
    },
    methods: {
        send() {
            bus.$emit('a-msg', this.b);
        }
    },
     beforeCreate() {
        // $on('事件名',fn(a))
        // 接收A中的数据
        console.log('beforeCreate')
        console.log(this.b)
        bus.$on('b-msg', (b) => { //箭头函数让this得到主vue实例
            this.b = b
        });
    },
     created() {
        // $on('事件名',fn(a))
        // 接收A中的数据
        console.log('created')
         console.log(this.b)
        bus.$on('b-msg', (b) => { 
            this.b = b
        });
    },
     beforeMount() {
        // $on('事件名',fn(a))
        // 接收A中的数据
        console.log('beforeMount')
         console.log(this.b)
        bus.$on('b-msg', (b) => { 
            this.b = b
        });
    },
    mounted() {
        // $on('事件名',fn(a))
        // 接收A中的数据
        console.log('mounted')
        bus.$on('b-msg', (b) => { 
            this.b = b
        });
    },
    beforeUpdate() {
        // $on('事件名',fn(a))
        // 接收A中的数据
        console.log('beforeUpdate')
        bus.$on('b-msg', (b) => { 
            this.b = b
        });
    },
     updated() {
        // $on('事件名',fn(a))
        // 接收A中的数据
        console.log('updated')
        bus.$on('b-msg', (b) => { 
            this.b = b
        });
    },
     beforeDestory() {
        // $on('事件名',fn(a))
        // 接收A中的数据
        console.log('beforeDestory')
        bus.$on('b-msg', (b) => { 
            this.b = b
        });
    },
     destoryed() {
        // $on('事件名',fn(a))
        // 接收A中的数据
        console.log('destoryed')
        bus.$on('b-msg', (b) => { 
            this.b = b
        });
    },

}
</script>
<style scoped>
.Home {
    color: white;
    border: 1px solid blue;
    background-color: purple;
}
</style>
